<template>
  <div class='goodsInfo'>
    <!-- 创建小球半场动画 -->
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div class='ball' v-show='flag' ref='ball'></div>
    </transition>
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<!-- 轮播图 -->
            <swiper :swiperList="goodsSwiperList"></swiper>  
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">市场价</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
              市场价：<del>￥{{price}}</del>&nbsp;&nbsp;销售价：
              <span class="now_price">￥{{nowprice}}</span>
            </p>
            <p>
              购买数量：<numberbox @get='getCount' :max='num' ></numberbox>
            </p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar" >加入购物车</mt-button>
					</div>
				</div>
			</div>
			<div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：10000</p>
          <p>库存情况：{{num}}件</p>
          <p>上架时间：2018-7-12</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="addDec">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain  @click="addComment">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue';
import numberbox from '../subcomponents/goodsnumberbox.vue';
export default {
  data(){
    return {
      id: this.$route.params.id,
      goodsSwiperList:[
        {img:'../../src/images/07.jpg'},
        {img:'../../src/images/08.jpg'},
      ],
      flag: false,
      selectedCount:1,
      num: 0,
      price: 808,
      nowprice: 788,
    }
  },
  created(){
    //模拟使用watch监听数据变化
    setTimeout(()=>
    {
      this.num = parseInt(Math.random()*100);
    },1000)
  },
  methods:{
    addToShopCar(){
      this.flag = !this.flag;
      var goodsinfo = {
        id:this.id,
        count:this.selectedCount,
        price:this.nowprice,
        selected:true
      }
      this.$store.commit('addToCar',goodsinfo);
    },
    beforeEnter(el){
      el.style.transform = "translate(0, 0)";
    },
    enter(el,done){
      el.offsetWidth;
      // getBoundingClientRect  rectObject = object.getBoundingClientRect();
      //2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
      // 　rectObject.top：元素上边到视窗上边的距离;
      // 　rectObject.right：元素右边到视窗左边的距离;
      // 　rectObject.bottom：元素下边到视窗上边的距离;
      // 　rectObject.left：元素左边到视窗左边的距离;
      var ball = this.$refs.ball.getBoundingClientRect();
      //虽然可以通过父子间传值的方式来获取购物车小图标的值，但是有点繁琐，就采用dom的方式来获取了
      var shopCar = document.getElementById('shopcar').getBoundingClientRect();
      var x = shopCar.left - ball.left;
      var y = shopCar.top - ball.top;
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter(el){
      this.flag = !this.flag
    },
    addDec() {
      this.$router.push({name:'goodsDec'})
    },
    addComment(){
      this.$router.push({name:'goodsComment'})
    },
    getCount(count) {
      this.selectedCount = count;
    }
  },
  components:{
    swiper,
    numberbox
  }
  
}
</script>
<style lang="scss" scoped>
  .goodsInfo {
    background-color: #eee;
    overflow: hidden;
    .now_price {
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
    .mui-card-footer {
      display: block;
      button {
        margin: 15px 0;
      }
    }
    //设置小球
    .ball {
      position: absolute;
      top: 391px;
      left: 148px;
      z-index:99;
      width: 15px;
      height: 15px;
      background-color: red;
      border-radius: 50%;

    }
    
  }
</style>